import React, {Component} from 'react';
import './Home.css';

import MainHeader from '../../pages/MainHeader'
import CarsWappers from '../../pages/CarsWappers'
import BtnFooter from '../../pages/BtnFooter'
import {extRoute} from '../../../router'

import axios from 'axios'
import {Route, Switch} from 'react-router-dom'

import {Layout} from 'antd';

const {Header, Footer, Sider, Content} = Layout;


class App extends Component {
    constructor(props) {
        super(props);
        // ES6 类中函数必须手动绑定
        this.clickHandle = this.clickHandle.bind(this);
        this.readHandle = this.readHandle.bind(this);
        this.writeHandle = this.writeHandle.bind(this);
        // console.log(extRoute())
    }

    clickHandle(e) {
        alert('链接被点击')
    }

    async readHandle(e) {
        let result = await axios.get("/read")
        if (result.data)
            console.log(result)
    }

    async writeHandle(e) {
        let result = await axios.post("/write", {
            "name": "namae1",
            "author": "author1",
            "price": 22.22
        })
        if (result.data)
            console.log(result)
    }

    render() {
        return (
            <div>
                <Layout className="m-layout">
                    <Header className="m-header">
                        {/*头*/}
                        <MainHeader></MainHeader>
                        {/*轮播*/}
                        <div>
                            <CarsWappers></CarsWappers>
                        </div>
                    </Header>

                    <Content className="m-content">
                        {extRoute()}
                    </Content>

                    <Footer className="m-footer">
                        <div>
                            <BtnFooter></BtnFooter>
                        </div>
                    </Footer>
                </Layout>
            </div>
        );
    }
}


export default App;
